<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>语言化标签</title>
</head>
<style>
    *{
        margin:0;
        padding:0;
    }
    .page{
        height:100vh;
background-color: rgba(0,0,0);
    }
    /* 响应式(自适应）布局 网页可以响应设备 分辨率 宽度 不能写死px 100vw*/
</style>
<body>
    <div class="page">
        <!-- html5语义化标签
        可以和div 一样做盒子，块级元素都可以
    可读性更强 团队 爬虫 有利于百度分析网页的内容
网页的时候，语义化更好，百度排名更前-->
 <header class="header"></header>
 <!--导航-->
 <nav class="nav">nav</nav>
 <main class="main">
     <article class="article">
         比div表达出不同盒子外，还可以不同性质的内容
         <section class="content">
         <h1>谁是头号玩家</h1>
         <p>信息过载时代</p>
         </section>
     </article>
     <aside class="aside">侧边栏标签</aside>
 </main>
 <footer class="footer"></footer>
    </div>
</body>
</html>